<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>积分商城管理</title>
    <div th:include="includeJs::bootstrap_js"></div>
    <div th:include="includeJs::layui_js"></div>
</head>
<body>
<div class="container-scroller d-flex">
    <div th:replace="includeJs::admin_leftNav"></div>

    <div class="container-fluid page-body-wrapper">
        <div th:replace="includeJs::admin_nav"></div>
        <div class="main-panel">
            <div class="content-wrapper">
                <div id="addWin" style="display: none">
                    <form id="addfrom" class="layui-form">
                        <table align="center" style="border-collapse: separate;border-spacing: 10px 30px;">
                            <tr>
                                <td width="110px">优惠券名称:</td>
                                <td>
                                    <input type="text" name="couponName" required lay-verify="title" placeholder="商品名称" autocomplete="off" class="layui-input">
                                </td>
                                <td width="110px">优惠券持续时间:</td>
                                <td>
                                    <select name="effectiveTime" lay-verify="required">
                                        <option value="">请选择优惠券持续时间</option>
                                        <option value="15">15天</option>
                                        <option value="30">30天</option>
                                        <option value="60">60天</option>
                                        <option value="0">永久</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td width="110px">优惠券价格:</td>
                                <td>
                                    <input type="number" name="wantPoint" lay-verify="required|number" placeholder="优惠券价格" autocomplete="off" class="layui-input">
                                </td>
                                <td>优惠金额:</td>
                                <td>
                                    <input type="number" name="couponMoney" required lay-verify="number" placeholder="输入优惠金额" autocomplete="off" class="layui-input">
                                </td>
                                <td colspan="2" style="text-align: center;">
                                    <img class="huixian" width="100px" src="" alt="" />
                                </td>
                            </tr>
                            <tr>
                                <td width="110px">优惠券使用条件:</td>
                                <td>
                                    <input type="number" name="couponTarget" lay-verify="required|number" placeholder="优惠券价格" autocomplete="off" class="layui-input">
                                </td>
                            </tr>
                            <tr>
                                <td>商品简介:</td>
                            </tr>
                            <tr>
                                <td align="center"  colspan="5" >
                                    <textarea name="couponInfo" placeholder="请输入内容" class="layui-textarea"></textarea>
                                </td>
                            </tr>
                            <tr>
                                <td align="center" colspan="5">
                                    <button lay-submit lay-filter="addCoupon" id="addCoupon" class="layui-btn layui-btn-warm" ><i class="layui-icon layui-icon-ok" ></i>提交</button>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
                <div id="editWin" style="display: none">
                    <form id="editfrom" class="layui-form" lay-filter="editfrom">
                        <table align="center" style="border-collapse: separate;border-spacing: 10px 30px;">
                            <tr>
                                <td width="110px">优惠券名称:</td>
                                <input hidden name="id" type="text"  />
                                <td>
                                    <input type="text" name="couponName" required lay-verify="title" placeholder="商品名称" autocomplete="off" class="layui-input">
                                </td>
                                <td width="110px">优惠券持续时间:</td>
                                <td>
                                    <select name="effectiveTime" lay-verify="required">
                                        <option value="">请选择优惠券持续时间</option>
                                        <option value="1">1天</option>
                                        <option value="3">3天</option>
                                        <option value="15">15天</option>
                                        <option value="30">30天</option>
                                        <option value="60">60天</option>
                                        <option value="0">永久</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td width="110px">优惠券价格:</td>
                                <td>
                                    <input type="number" name="wantPoint" lay-verify="required|number" placeholder="优惠券价格" autocomplete="off" class="layui-input">
                                </td>
                                <td>优惠金额:</td>
                                <td>
                                    <input type="number" name="couponMoney" required lay-verify="number" placeholder="输入优惠金额" autocomplete="off" class="layui-input">
                                </td>
                            </tr>
                            <tr>
                                <td width="110px">优惠券使用条件:</td>
                                <td>
                                    <input type="number" name="couponTarget" lay-verify="required|number" placeholder="优惠券价格" autocomplete="off" class="layui-input">
                                </td>
                            </tr>
                            <tr>
                                <td>优惠简介:</td>
                            </tr>
                            <tr>
                                <td align="center"  colspan="5" >
                                    <textarea name="couponInfo" placeholder="请输入内容" class="layui-textarea"></textarea>
                                </td>
                            </tr>
                            <tr>
                                <td align="center" colspan="5">
                                    <button lay-submit lay-filter="editCoupon" id="editCoupon" class="layui-btn layui-btn-warm" ><i class="layui-icon layui-icon-ok" ></i>提交</button>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
                <table class="layui-hide" id="coupon" lay-filter="coupon"></table>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button lay-event="addCouponBtn" class="layui-btn layui-btn-sm" ><i class="layui-icon layui-icon-add-1" style="font-size: 30px;"></i>添加优惠券</button>
    </div>
</script>
<script type="text/html" id="toolDemo">
    <button lay-event="update" class="layui-btn layui-btn-sm layui-btn-danger" ><i class="layui-icon layui-icon-edit"></i>修改</button>
    <button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger" ><i class="layui-icon layui-icon-delete"></i>删除</button>
</script>
<script>
    layui.use([ 'element', 'table', 'layer', 'form' ,'laydate','upload','layedit'],function() {
        var element = layui.element;
        var layer = layui.layer;
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var upload = layui.upload;
        var layedit = layui.layedit;

        table.render({
            elem: '#coupon'
            ,
            url: '/admin/CouponManage'
            ,
            toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,
            title: '商品管理表'
            ,
            cols: [
                [
                    {field: 'id', title: 'ID', width: 80, fixed: 'left', sort: true}
                    , {field: 'couponName', title: '优惠券名称', width: 120}
                    ,{
                    field: 'couponTarget',
                    title: '使用条件（￥）',
                    width: 200
                }
                    , {
                    field: 'couponInfo',
                    title: '优惠券详情',
                    width: 200
                }
                    , {field: 'couponMoney', title: '优惠金额（￥）', width: 150, sort: true}
                    , {field: 'effectiveTime', title: '优惠券有效时间', width: 120}
                    , {field: 'wantPoint', title: '所需积分', width: 150, sort: true}
                    , {toolbar: '#toolDemo', fixed: 'right', title: '操作', width: 200}
                ]
            ]
            ,
            page: true
            ,
            page: {
                limit: 10,
                page: 1,
                limits: [10, 30, 50, 100],
                layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
            }
        });

        table.on('toolbar(coupon)',function (obj) {
            if(obj.event == 'addCouponBtn'){
                layer.open({
                    type: 1,
                    title:'添加优惠券',
                    skin: 'layui-layer-demo', //样式类名
                    closeBtn: 1, //不显示关闭按钮
                    area: ['700px', '550px'],
                    fixed: false, //不固定
                    maxmin: true,
                    shadeClose: false, //开启遮罩关闭
                    content: $('#addWin'),
                    cancel:function(index, layero){
                        $("#addfrom")[0].reset();
                        layui.form.render();
                        layer.close(index);
                        table.reload('coupon');
                    }
                });
            }
        });

        form.on("submit(addCoupon)",function (data) {
            $.ajax({
                url: '/admin/addCoupon',
                data: data.field,
                type: 'POST',
                dadaType: 'text',
                success: function (data) {
                    if (data == 'yes') {
                        layer.msg("添加成功");
                        location.reload();
                    } else {
                        layer.msg("添加失败");
                        location.reload();
                    }

                }
            });
        });

        table.on('tool(coupon)',function (obj) {
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('确认要删除吗？', function(index){
                    $.post("/admin/delCoupon",{id:data.id},function (d) {
                        if(d == 'yes'){
                            layer.msg('删除成功');
                            table.reload('coupon');
                        }else{
                            layer.msg('删除失败');
                            table.reload('coupon');
                        }
                    });
                    table.reload('coupon');
                    layer.close(index);
                });
            }else if(obj.event === 'update'){
                form.val("editfrom", {
                    'id':data.id
                    ,"couponName": data.couponName // "name": "value"
                    ,"couponPrice": data.couponPrice
                    ,"couponInfo": data.couponInfo
                    ,"couponMoney": data.couponMoney
                    ,"effectiveTime":data.effectiveTime
                    ,"couponTarget":data.couponTarget
                    ,"wantPoint": data.wantPoint
                });
                layer.open({
                    type: 1,
                    title:'修改商品',
                    skin: 'layui-layer-demo', //样式类名
                    closeBtn: 1, //不显示关闭按钮
                    area: ['700px', '600px'],
                    fixed: false, //不固定
                    maxmin: true,
                    shadeClose: false, //开启遮罩关闭
                    content: $('#editWin'),
                    cancel:function(index, layero){
                        $("#editfrom")[0].reset();
                        layui.form.render();
                        layer.close(index);
                    }
                });
                form.on("submit(editCoupon)",function (data) {
                    $.ajax({
                        url:'/admin/editCoupon',
                        data:data.field,
                        type:'POST',
                        dadaType:'text',
                        success:function(data){
                            if(data == 'yes') {
                                layer.msg("修改成功");
                                location.reload();
                            }else {
                                layer.msg("修改失败");
                                location.reload();
                            }

                        }
                    });
                    return false;
                });
            }
        });
    });
</script>
</html>